<template>
    <div class="statistics_warp">
        <div class="title">
            <span>空间统计</span>
        </div>
        <div class="statistics">
            <p>
                <span class="statistics_title">今日被访问次数：</span>
                <span class="number">{{statistics.todayNum}}</span>
            </p>
            <p>
                <span class="statistics_title">总访被问次数：</span>
                <span class="number">{{statistics.sum}}</span>
            </p>
            <p>
                <span class="statistics_title">空间登录次数：</span>
                <span class="number">{{statistics.loginNum}}</span>
            </p>
            <p>
                <span class="statistics_title">今日访问别人数：</span>
                <span class="number">{{statistics.todayPersonNum}}</span>
            </p>
            <p>
                <span class="statistics_title">总访问别人数：</span>
                <span class="number">{{statistics.sumPerson}}</span>
            </p>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo
            })
        },
        data() {
            return {
                statistics: {}
            }
        },
        methods: {
            handleGetSpatial() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                this.$store.dispatch('personalModule/getSpatial',{
                    userId: this.userInfo.id,
                    type:4
                }).then(res => {
                    if (res.data.code === 200) {
                        this.statistics = res.data.result
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                    loading.close()
                }).catch(error => {
                    this.$message.error('服务器内部错误');
                    loading.close()
                })
            }
        },
        created() {
            this.handleGetSpatial()
        },
    }
</script>

<style lang="scss" scoped>
    .statistics_warp {
        width: 100%;

        .title {
            text-align: left;
            border-bottom: 1px solid #DCDFE6;
            box-sizing: border-box;
            padding-bottom: 10px;
        }

        .statistics {
            font-size: 14px;
            color: #606266;
            text-align: center;

            .statistics_title {
                display: inline-block;
                width: 130px;
                text-align: right;
            }

            .number {
                margin-left: 15px;
            }
        }
    }
</style>